<template>
	<view class="bigTurntable text-center padding-top-xl">
		<view class="topEaBg"></view>
		<view class="text-center">
			<l-dialer :customStyle="'margin: 0 auto'" :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer">
				<image class="myImg" slot="pointer" src="@/static/turnable_btn.png" @click="onClick" />
			</l-dialer>
		</view>
		
		<view class="text-red">点击抽奖看广告参与抽奖, 每天免费5次</view>
		<view class="list-scall bg-white margin" style="border-radius: 10rpx;">
			<base-scroll-list :rowsDataProps="rowsData"></base-scroll-list>
		</view>
		
		<view class="rightEa">
			<view @click="ruleClick" class="cu-tag radius text-red text-bold bg-white" style="width: 100% ;border-radius: 50rpx 2rpx 2rpx 50rpx;">规&nbsp;&nbsp;则</view>
			<br/>
			<view @click="recordClick" class="cu-tag radius text-red text-bold bg-white margin-top" style="border-radius: 50rpx 2rpx 2rpx 50rpx;">中奖记录</view>
		</view>
	</view>
</template>

<script>
	import baseScrollList from '@/components/baseScrollList.vue'
	// 在页面中定义激励视频广告
	let videoAd = null
	export default {
		components: {baseScrollList},
		data() {
			return {
				// 奖品列表，
				prizeList: [{
						id: 'coupon88',
						name: '8.8折',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/175718/35/12595/5477/60b660c6Eb850717b/a1cfe750dcdb5b78.png',
					},
					{
						id: 'coupon900',
						Color: 'rgb(251, 219, 216)',
						name: '900',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/190845/9/6092/4489/60b65fe8Ebb8f8284/955da889f6d1c13e.png',
					},
					{
						id: 'coupon1',
						name: '1元',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/189927/14/6092/4174/60b66173E23c472ea/44af15a151defca1.png',
					},
					{
						id: 'apple',
						Color: 'rgba(246, 142, 46, 0.5)',
						name: '苹果手机',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/177670/26/4591/2514/60a25874Ee0e5332a/99c7bdfede732ae4.png'
					},
					{
						id: 'coupon210',
						name: '210元',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/124578/12/20170/4429/60b635d8E7089ebb0/7a47d76a2a260cc0.png'
					},
					{
						id: 'jd100',
						name: '100京豆',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/162790/37/15087/28046/6062a49aE8f2c10f2/5591ff0ff38a45e2.png',
					},
					{
						id: 'coupon400',
						name: '400元',
						img: 'https://img11.360buyimg.com/pop/jfs/t1/177090/2/7001/4535/60b6607aEe9c1db2a/76c67675f547db3f.png'
					},
					{
						id: 'thanks',
						name: '谢谢参与',
						img: 'https://storage.jd.com/cdn-upload/dialTemplateHeart.png',
					}
				],
				rowsData: []
			}
		},
		onLoad() {
			// 在页面onLoad回调事件中创建激励视频广告实例
			if (wx.createRewardedVideoAd) {
			  videoAd = wx.createRewardedVideoAd({
			    adUnitId: 'adunit-47f91b486323285b'
			  })
			  videoAd.onLoad(() => {})
			  videoAd.onError((err) => {
			    console.error('激励视频光告加载失败', err)
			  })
			  videoAd.onClose((res) => {
				  if (res && res.isEnded) {
				  	// 正常播放结束，可以下发游戏奖励
				  	console.log("正常结束", res)
					// this.$refs.dialer.run(Math.floor(Math.random() * this.prizeList.length))
					this.$refs.dialer.run(7)
				  } else {
				  	// 播放中途退出，不下发游戏奖励
				  	console.log("异常退出")
				  }
			  })
			}
		},
		mounted() {
			this.getDataList()
		},
		methods: {
			onDone(index) {
				const prize = this.prizeList[index]
				uni.showModal({
					title: prize['id'] == 'thanks' ? '很遗憾' : '恭喜您',
					content: (prize['id'] !== 'thanks' ? `获得` : '') + prize['name']
				})
			},
			onClick() {
				// 奖品的索引
				// this.$refs.dialer.run(1)
				// 用户触发广告后，显示激励视频广告
				this.$refs.dialer.run(7)
				// if (videoAd) {
				//   videoAd.show().catch(() => {
				//     // 失败重试
				//     videoAd.load()
				//       .then(() => videoAd.show())
				//       .catch(err => {
				//         console.error('激励视频 广告显示失败', err)
				//       })
				//   })
				// }
				// uvue
				// const dialerRef = this.$refs['dialer'] as LDialerComponentPublicInstance
				// dialerRef.run(5)
			},
			recordClick() {},
			ruleClick() {
				this.goto("/pages/index/bigTurntable/rules/index")
			},
			// 获取数据
			getDataList() {
				let _rowsData = [
					{
						name: '1张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '2张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '3张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '4张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '5张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '6张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '7张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '8张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '9张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '10张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '11张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					},{
						name: '12张**',
						money: 500,
						time: '2022-08-18 10:10:10'
					}
				]
				
				// 更新
				this.rowsData = _rowsData
			},
		}
	}
</script>

<style lang="scss">
	.bigTurntable {
		position: relative;
		.rightEa{
			position: absolute;
			right: 0;
			top: 100rpx;
			
		}
		.l-dialer__pointer, .myImg{
			width: 200rpx!important;
			height: 200rpx!important;
		}
		.list-scall {
			height: calc(100vh - 670rpx);
			box-sizing: border-box;
		}
	}
</style>